<template>
  <view class="myMap">
    <map style="width: 100vw; height: 100vh;" :layer-style='1' :style="{ height: mapheight }" :show-location='true'
      :latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale" @markertap="chimarkertap"
      @callouttap='chicallouttap'>
    </map>
  </view>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
const { latitude, longitude, scale, marker, bottomData } = defineProps(["latitude", "longitude", "scale", "marker", "bottomData"]);
const emits = defineEmits(["markertap", "callouttap"]);
const chimarkertap = (e) => {
  emits("markertap", e);
};
const chicallouttap = (e) => {
  emits("callouttap", e);
};
const Map = computed({
  mapheight() {
    let data = ''
    if (bottomData) {
      if (upTop) {
        data = '50px'
      } else {
        data = '200px'
      }
    } else {
      data = '90vh'
    }
    return data
  },
  coverbottom() {
    let data = ''
    if (bottomData) {
      data = '20rpx'
    } else {
      data = '100rpx'
    }
    return data
  }
})
</script>

<style scoped lang="scss">
.myMap {
  width: 100%;
  height: 66%;

  .map-container {
    position: relative;
    overflow: hidden;

    .cover-view {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 80rpx;
      height: 80rpx;
      color: #484848;
      background-color: #fff;
      background-size: 120rpx 120rpx;
      background-position: center center;
      position: absolute;
      bottom: 100rpx;
      right: 32rpx;
    }

    .cover-image {
      display: inline-block;
      width: 30rpx;
      height: 30rpx;
    }
  }
}
</style>